<template>
  <van-nav-bar
    title="车险投保"
    right-text="下一步"
    @click-right="handleNextStep"
    left-arrow
    class="bar"
    @click-left="handleGoBack"
  />
  <div class="insurance-step-container">
    <!-- 步骤条 -->
    <div class="containerHeader">
      <div class="containerHeaderBody"  v-for="(v,i) in list" :key="i">
        <div class="z">
          <div class="containerTop" :class="[activeNum==i ? 'active' : '']">{{i+1}}</div>
          <div class="containerBottom">{{v}}</div>
        </div>
        <div class="line"></div>
      </div>
    </div>
    <!-- 注意事项内容 -->
    <div v-show="activeNum == 0" class="notice-box">
      <h3 class="notice-title">注意事项</h3>
      <ul class="notice-list">
        <li>
          <span class="num">1</span>
          续保车辆请确认：当前日期距离上年度保单终保日期超过60天的，保险公司无法提供投保服务。
        </li>
        <li>
          <span class="num">2</span>
          仅限河北（冀牌照）车辆（新车无牌照的需提供河北省范围内购车发票），其他省（市、区）车辆暂不提供投保服务。
        </li>
        <li>
          <span class="num">3</span>
          每个用户（以手机号码为准）最多登记3辆车辆（不含单位/企业车辆），请您仔细核对您登记的车辆信息。
        </li>
      </ul>
      <div class="tips">
        <van-icon name="warning-o" color="#f7ba2a" />
        请仔细阅读以上注意事项，确认您的情况符合投保要求。
      </div>
      <van-checkbox v-model="isAgree" class="agree-checkbox">我已阅读并同意以上注意事项</van-checkbox>
    </div>
    <tbxz ref="tbxzz" v-show="activeNum == 1"/>
    <tbr ref="tbrz"  v-show="activeNum == 2"/>
    <tbcl ref="tbclz"  v-show="activeNum == 3"/>
    <tbyy ref="tbyyz"  v-show="activeNum == 4"/>
    <tbpgs ref="tbpgsz"  v-show="activeNum == 5"/>
  </div>
</template>

<script setup>
import { ref,watch } from 'vue';
import tbxz from './child/tbxz.vue';
import tbr from './child/tbr.vue';
import tbcl from './child/tbcl.vue';
import tbyy from './child/tbyy.vue';
import tbpgs from './child/tbpgs.vue';
import { userInfoStrore } from '/@/stores/userInfoStore'

const store = userInfoStrore()
const isAgree = ref(true);
const activeNum = ref(0)
const tbrz = ref(null)
const list = ref(["注意事项", "投保须知", "投保人", "车辆", "投保意愿", "匹配公司"])
// 下一步按钮逻辑
const handleNextStep = () => {
  if (isAgree.value) {
    // 同意后可进入下一步，这里可通过路由跳转，如：router.push('/insurance-step2')
    if(activeNum.value < 5){
      activeNum.value++
    } else {
      activeNum.value = 0
      store.storeFormfullData = {}
      sessionStorage.removeItem('formfullData')
    }
    if(activeNum.value == 1) {
      store.storeFormfullData = {}
    }
    store.getNum(activeNum.value)
  } else {
    // 未同意给出提示
    console.log('请先阅读并同意注意事项');
  }
};
// 返回按钮逻辑
const handleGoBack = () => {
  // 返回上一页，如：history.back();
  console.log('返回上一页');
};
</script>

<style lang="less" scoped>
.bar {
  width: 100%;
  height: 50px;
}
.insurance-step-container {
  padding: 16px;
  width: 100%;
  min-height: calc(100vh - 50px);
  position: relative;
  background: #f2f5fa;
  .containerHeader {
    display: flex;
    justify-content: space-around;
    .containerHeaderBody {
      display: flex;
      // align-items: center;
      justify-content: center;
      .z {
        .containerTop {
         width: 30px;
         height: 30px;
         line-height: 30px;
         border-radius: 50%;
         margin: 0 auto;
         color: #000;
        // background: #409eff;
        border: 1px solid #000;
        }
        .containerBottom {
          width: 38px;
          font-size: 13px;
          margin-top: 3px;
          line-height: 17px;
        }
      }
      .line {
        width: 20px;
        height: 1px;
        margin-top: 17px;
        background: #000;
      }
      .active {
        color: #fff9e6!important;
        border: none!important;
        background: #409eff!important;
      }
    }
    .containerHeaderBody:last-child{
      .line {
        display: none;
      }
    }
  }
}
.divs {
  margin-bottom: 24px;
}
.notice-box {
  padding: 16px;
  margin-top: 20px;
  text-align: left;
  background: #fff;
  border-radius: 8px;
  font-size: 13px;
}
.notice-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 12px;
}
.notice-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.notice-list li {
  margin-bottom: 16px;
  line-height: 1.6;
  text-align: left;
}
.num {
  display: inline-block;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  background: #409eff;
  color: #fff;
  border-radius: 50%;
  margin-right: 8px;
}
.tips {
  display: flex;
  align-items: center;
  background: #fff9e6;
  color: #f7ba2a;
  padding: 10px;
  border-radius: 4px;
  margin: 16px 0;
}
.agree-checkbox {
  margin-top: 12px;
}
</style>